.transition--fade-down-enter,
.transition--fade-down-leave,
.transition--fade-left-enter,
.transition--fade-left-leave,
.transition--fade-right-enter,
.transition--fade-right-leave,
.transition--fade-enter,
.transition--fade-leave,
.transition--fade-up-leave,
.transition--fade-up-enter {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
}

$transition-speed: 1s;
.transition--fade-left-enter {
  @include fadeInLeft($transition-speed * 2, $transition-speed / 2, $transition-easing, both, visible);
}

.transition--fade-left-leave {
  @include fadeOutRight($transition-speed * 1, 0s, $transition-easing, both, visible);
}

.transition--fade-right-enter {
  @include fadeInRight($transition-speed * 2, $transition-speed / 2, $transition-easing, both, visible);
}

.transition--fade-right-leave {
  @include fadeOutLeft($transition-speed * 1, 0s, $transition-easing, both, visible);
}

.transition--fade-down-enter {
  @include fadeInDown($transition-speed * 2, 0s, $transition-easing, both, visible);
}

.transition--fade-down-leave {
  @include fadeOutDown($transition-speed, 0s, $transition-easing, both, visible);
}

.transition--fade-up-enter {
  @include fadeInUp($transition-speed * 2, 0s, $transition-easing, both, visible);
}

.transition--fade-up-leave {
  @include fadeOutUp($transition-speed, 0s, $transition-easing, both, visible);
}

.transition--fade-enter {
  @include fadeIn($transition-speed * .5, 0s, $transition-easing, both, visible);
}

.transition--fade-leave {
  @include fadeOut($transition-speed, 0s, $transition-easing, both, visible);
}
